<template>
  <div style="width: 100%; height: 100%">
    <l-map
      ref="map"
      v-model:zoom="zoom"
      :center="lmapCenter"
      class="mapContainer"
      @ready="onMapReady"
    >
      <l-tile-layer
        url="http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=3131a9355f28fb662853cfa719d3e160&x={x}&y={y}&z={z}"
        layer-type="base"
        name="OpenStreetMap"
        :options="{ corrdType: 'gcj02' }"
      />
      <GISMarkerList :deviceCategoryList="deviceCategoryList" />
      <GISMarkerDangerList
        :deviceCategoryList="deviceCategoryList"
        :dangerData="tableDangerData"
      />
      <!-- GIS 管线 -->
      <GISPolylineListLine :deviceCategoryList="deviceCategoryList" />
      <!-- GIS 巡检路线 -->
      <GISPolylineList
        :deviceCategoryList="deviceCategoryList"
        :tableLine="tableLineData"
      />
      <GISMarkerPersonList />
      <GISPositionList
        :deviceCategoryList="deviceCategoryList"
        :inspUserPosition="inspUserPositionData"
      />
      <GISAreaList />
      <!-- <GISHighlightFeature :deviceCategoryList="deviceCategoryList" /> -->
    </l-map>
  </div>
</template>

<script>
import "leaflet/dist/leaflet.css";
import "leaflet";
import "@/utils/grid.ts";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import GISMarkerList from "./MarkerList/index.vue";
import GISMarkerDangerList from "./MarkerDangerList/index.vue";
import GISMarkerPersonList from "./MarkerPersonList/index.vue";
import GISPolylineList from "./PolylineList/index.vue";
import GISPolylineListLine from "./PolylineListLine/index.vue";
import GISAreaList from "./AreaList/index.vue";
import GISHighlightFeature from "./HighlightFeature/index.vue";
import GISPositionList from "./PositionList/index.vue";
import DangerAPI from "@/api/DangerAPI";
import GisPolygonInfoAPI from "@/api/GisPolygonInfoAPI";
export default {
  components: {
    LMap,
    LTileLayer,
    GISMarkerList,
    GISPolylineList,
    GISAreaList,
    GISHighlightFeature,
    GISMarkerDangerList,
    GISPositionList,
    GISMarkerPersonList,
    GISPolylineListLine,
  },
  props: [
    "deviceCategoryList",
    "lineData",
    "dangerData",
    "mapCenter",
    "inspUserPosition",
  ],
  data() {
    return {
      zoom: 12,
      tableDangerData: [],
      tableLineData: [],
      inspUserPositionData: [],
      lmapCenter: [31.2, 121.2],
    };
  },
  mounted() {
    this.f_HandelQueryDanger();
  },
  watch: {
    dangerData(newVal, oldValue) {
      this.tableDangerData = newVal;
    },
    mapCenter(newVal) {
      this.lmapCenter = newVal;
    },
    lineData(newVal) {
      console.log(newVal);

      this.tableLineData = newVal;
    },
    inspUserPosition(newVal) {
      this.inspUserPositionData = newVal;
    },
  },
  methods: {
    // then get the instance on event
    onMapReady(instance) {
      this.instance = instance;
      window.__gmap = instance;
      // 地图定位到分公司城市中心点
      GisPolygonInfoAPI.api_init_geom({ pageIndex: 1, pageSize: 10 }).then(
        (res) => {
          if (res.data.items.length) {
            let positons = res.data.items[0].address.split(",").reverse();
            instance.setView(positons);
          } else {
            instance.setView([31.2, 121.2]);
          }
        }
      );
    },
    f_HandelQueryDanger() {
      let params = {
        pageIndex: 1,
        pageSize: 10000,
      };
      DangerAPI.api_query(params).then(({ data, succeeded }) => {
        if (succeeded) {
          this.tableDangerData = data.items.map((item) => {
            const { coordinates } = JSON.parse(item.jsonPoint);
            return {
              ...item,
              latlng: [coordinates[1], coordinates[0]],
            };
          });
        }
      });
    },
  },
};
export const useMap = () => window.__gmap;
</script>

<style>
.mapContainer {
  .leaflet-control-attribution,
  .leaflet-control-zoom {
    display: none;
  }
}
</style>
